<script setup>
import { ref } from 'vue';
import { MyMessageBox } from './modules/my-ui';

const tableData = ref({
  tHead: [
    {
      key: 'id',
      text: 'No.',
      editable: false
    },
    {
      key: 'name',
      text: 'Name',
      editable: false
    },
    {
      key: 'age',
      text: 'Age',
      editable: false
    },
    {
      key: 'chinese',
      text: 'Chinese',
      editable: true
    },
    {
      key: 'math',
      text: 'Math',
      editable: true
    },
    {
      key: 'english',
      text: 'English',
      editable: true
    }
  ],
  tBody: [
    {
      id: 1,
      name: 'zhangsan',
      age: 18,
      chinese: 119,
      math: 99,
      english: 130
    },
    {
      id: 2,
      name: 'lisi',
      age: 19,
      chinese: 80,
      math: 89,
      english: 100
    },
    {
      id: 3,
      name: 'wangwu',
      age: 20,
      chinese: 123,
      math: 111,
      english: 116
    }
  ]
});

const editData = ({ index, key, value, text }, removeInput) => {
  if (tableData.value.tBody[index][key] != value) {
    const cfm = window.confirm(`
      您要确定将数据下标为${index}项, ${text}字段的内容修改为"${value}"吗？
    `);

    if (cfm) {
      tableData.value.tBody = tableData.value.tBody.map((item, idx) => {
        index === idx && (item[key] = value);
        return item;
      });
    } else {
      removeInput();
    }
  }
};

const showMessageBox = () => {
  MyMessageBox({
    confirmBtnText: '确定',
    title: 'MessageBox',
    content: 'This is MyMessageBox content.'
  })
    .then(() => {
      console.log('MessageBox resolve');
    })
    .catch(() => {
      console.log('MessageBox reject');
    });
};

const showConfirmMessageBox = () => {
  MyMessageBox.confirm({
    showCancelBtn: true,
    cancelBtnText: '取消',
    title: 'confirmMessageBox',
    content: 'This is showConfirmMessageBox content'
  })
    .then(() => {
      console.log('showConfirmMessageBox resolve');
    })
    .catch(() => {
      console.log('showConfirmMessageBox reject');
    });
};

const showPromptMessageBox = () => {
  MyMessageBox.prompt({
    confirmBtnText: '确定',
    showCancelBtn: true,
    cancelBtnText: '取消',
    title: 'promptMessageBox',
    content: 'This is showPromptMessageBox content'
  })
    .then((value) => {
      //value -> 获取输入框输入的内容
      console.log('showPromptMessageBox resolve:', value);
    })
    .catch(() => {
      console.log('showPromptMessageBox reject');
    });
};
</script>

<template>
  <h1>可编辑表格：</h1>
  <MyTable :data="tableData" @submit="editData"></MyTable>
  <h1>消息盒子：</h1>
  <div>
    <button @click="showMessageBox">showMessageBox</button>
    <button @click="showConfirmMessageBox">showConfirmMessageBox</button>
    <button @click="showPromptMessageBox">showPromptMessageBox</button>
  </div>
</template>
